<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';

function handleNext() {
  uni.navigateTo({
    url: '/pages/satisfactionSurvey/medium'
  });
}

// 评分问题列表
const ratingList = ref([
  {
    id: '1',
    title: '总体满意度',
    rating: 0
  },
  {
    id: '2',
    title: '医生服务',
    rating: 0
  },
  {
    id: '3',
    title: '护士服务',
    rating: 0
  },
  {
    id: '4',
    title: '就医环境',
    rating: 0
  },
  {
    id: '5',
    title: '就医就成便捷性',
    rating: 0
  }

]);

function getRatingDesc(item) {
  if (item.rating === 0) {
    return '';
  }
  switch (item.rating) {
    case 1:
      return '很不满意';
    case 2:
      return '不太满意';
    case 3:
      return '一般';
    case 4:
      return '比较满意';
    case 5:
      return '非常满意';
  }
}

function handleRating(count, item) {
  item.rating = count;
}
</script>

<template>
  <view class="page flex-col">
    <AuthBar back-home />
    <view class="flex-1 overflow-auto px-48 py-40 pb-60">
      <view class="page-content">
        <view class="page-title">
          服务评分
        </view>
        <view class="page-subtitle">
          请对本次就医体验进行评分（1星最低，5星最高）
        </view>

        <view class="page-rating">
          <!-- 评分项 -->
          <view v-for="(rat, index) in ratingList" :key="rat.id" class="rating-item mt-70">
            <view class="rating-item__hd flex items-center justify-between">
              <view class="rating-item__title">
                {{ index + 1 }}.{{ rat.title }}
              </view>
              <view class="rating-item__desc">
                {{ getRatingDesc(rat) }}
              </view>
            </view>
            <view class="rating-item__bd flex justify-between px-24">
              <view
                v-for="count in 5" :key="count" class="flex flex-col items-center"
                @click="handleRating(count, rat)"
              >
                <view class="rating-item__star mt-36" :class="{ active: rat.rating >= count }">
                  <wd-icon name="star-on" size="58px" />
                </view>
                <view class="rating-item__text">
                  {{ count }}星
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="flex-center">
        <view class="next-btn">
          <wd-button block @click="handleNext">
            下一步
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '满意度调查',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  height: 100%;
  background: var(--bg-color);

  .page-content {
    background: #e2ecfc;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 30px 40px;

    .page-title {
      color: var(--text-color);
      font-size: 48px;
      font-weight: bold;
    }

    .page-subtitle {
      color: var(--secondary-text-color);
      font-size: 30px;
    }

    .rating-item {
      .rating-item__title {
        color: var(--text-color);
        font-size: 36px;
        font-weight: 500;
      }

      .rating-item__desc {
        font-size: 32px;
        color: var(--primary);
      }

      .rating-item__star {
        color: #d7dade;

        &.active {
          color: #f78316;
        }
      }

      .rating-item__text {
        color: #3d3d3d;
        font-size: 32px;
        margin-top: 20px;
      }
    }
  }

  .next-btn {
    width: 708px;
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    margin-top: 80px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
